<template>
	<a-layout id="components-layout-demo-top" class="layout" v-loading="loading">
		<a-card :headStyle="{ 'text-align': 'center' }" :title="NewsDetail.Title" :bordered="false" style="width: 100%" class="acard">
			<div style="text-align: center;width: 100%;margin-bottom: 20px;">
				<div>
					发布时间：{{ NewsDetail.AddTime }}
					<span style="margin-left: 15px;">发布人：{{ NewsDetail.AddUserName }}</span>
					<span style="margin-left: 15px;">分类：{{ NewsDetail.TypeName }}</span>
				</div>
			</div>
			<div class="newscontent ql-editor" style="width: 100%;overflow: hidden;" v-html="NewsDetail.Content"></div>
		</a-card>
		<addActivity v-if="showModal" @closeFun="closeFun(1)"></addActivity>
	</a-layout>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
import { UserDoGetNewsDetail } from '@/api/follow';
import addActivity from './addActivity.vue';
import Cache from '@/utils/cache';
export default {
	components: {
		addActivity
	},
	data() {
		return {
			callback(key) {},
			menuList: [
				{
					title: '基础信息',
					path: '111',
					type: 'appstore',
					id: '9'
				},
				{
					title: '测试信息',
					path: '111',
					type: 'appstore',
					id: '8'
				}
			],
			NewsDetail: {},
			MClubList: [],
			MActivityList: [],
			realdyActivityList: [],
			okActivityList: [],
			avatar: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=757545797,2214471709&fm=11&gp=0.jpg',
			form: {
				UserName: '猪猪真的很好看',
				No: '174040312',
				Grade: '财务审计系 19财管2'
			},
			approvalList: '',
			showModal: false,
			loading: false
		};
	},
	created() {
		this.getList();
	},
	computed: {},
	methods: {
		async getList() {
			this.loading = true;
			let data = {};
			data.id = this.$route.query.ID;
			let res = await UserDoGetNewsDetail(data);
			res.data.data.Content = res.data.data.Content.replace(/\<img/gi, '<img class="rich_text_img" ');
			this.NewsDetail = res.data.data;
			this.loading = false;
		},
		closeFun(index) {
			this.showModal = false;
			if (index === 1) {
				this.showModal != this.showModal;
				this.getList();
			}
		}
	}
};
</script>

<style lang="less" scoped>
.acard {
	padding: 0 20px;
}
.newscontent img {
	max-width: 700px !important;
}
/deep/.ql-align-center {
	text-align: center;
}
/deep/.ql-align-left {
	text-align: left;
}
/deep/.ql-align-right {
	text-align: right;
}
/deep/.newscontent p a{
	display: block;
}
.ql-editor {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    line-height: 1.42;
    height: 100%;
    outline: none;
    overflow-y: auto;
    padding: 12px 15px;
    -o-tab-size: 4;
    tab-size: 4;
    -moz-tab-size: 4;
    text-align: left;
    white-space: pre-wrap;
    word-wrap: break-word;
}
</style>
